<template>
  <div class="shopcart" v-show="isHideCart">
    <transition name="fold">
      <div class="content">
        <div class="hd">
          <h2 class="title">购物车</h2>
          <span class="empty" @click="empty">{{cartProduct.length?'清空':'关闭'}}</span>
        </div>
        <div class="bd" ref="listContent">
          <scroll class="scroll" ref="scrollCartProd" :data="cartProduct" v-if="cartProduct.length">
            <ul class="shopcart-list">
              <li class="item"
                v-for="item in cartProduct">
                  <span class="name">{{item.product_name}}</span>
                  <span class="price">￥{{item.price}}/份<!--  * item.quantity --></span>
                  <div class="carcontrol-wrapper">
                    <Cartcontrol :productData="item" />
                  </div>
              </li>
            </ul>
          </scroll>
          <p class="no-info" v-else>暂无选择任何商品</p>
        </div>
        <div class="ft">
          <div class="total"><span class="num">总数: {{totalCount || 0}}件</span>&nbsp;&nbsp;<span class="price">总价: {{(totalPrice || 0)  | formatMoney}}</span></div>
          <span v-if="!isFree" class="disfree">还差{{disFree | formatMoney}}起送</span>
          <span class="btn btn-red" @click="gotoPay" v-else>去结算</span>
        </div>
      </div>
    </transition>
    <transition name="fade">
      <div class="mask" @click="hideCartList"></div>
    </transition>
  </div>
</template>
<script>
import Scroll from './base/scroll'
import { mapGetters } from 'vuex'
import Cartcontrol from './cartcontrol'
import { formatMoney } from '@/utils'
export default {
  props: {
    cartProduct: {
      Object
    },
    productId: {
      default: null
    }
  },
  data() {
    return {
      fold: true
    }
  },
  mounted() {
    if (this.isHideCart) {
      this.$refs.scrollCartProd.refresh()
    }
  },
  computed: {
    totalPrice() {
      return this.cartProduct.reduce((total, item) => {
        return total + Number(item.price) * item.quantity
      }, 0)
    },
    totalCount() {
      return this.cartProduct.reduce((total, item) => {
        return total + item.quantity
      }, 0)
    },
    ...mapGetters({
      isHideCart: 'isHideCart',
      free: 'free'
    }),
    isFree() {
      if (this.free && this.totalPrice < this.free.min_fee) {
        return false
      } else {
        return true
      }
    },
    disFree() {
      return (Number(this.free.min_fee) * 100 - Number(this.totalPrice) * 100) / 100
    }
  },
  methods: {
    empty() {
      this.$store.dispatch('clearCart', {type: 1})
    },
    hideCartList() {
      this.$store.dispatch('hideCartList')
    },
    gotoPay() {
      // 去结算的产品
      this.$router.push({path: '/gotopay', query: {type: 1}})
    }
  },
  components: {
    Cartcontrol,
    Scroll
  },
  filters: {
    formatMoney(number) {
      return formatMoney(number, '￥')
    }
  },
  watch: {
    isHideCart: function() {
      if (this.isHideCart && this.cartProduct.length) {
        setTimeout(() => {
          this.$refs.scrollCartProd.refresh()
        }, 20)
      }
    }
  }
}
</script>
<style lang="scss">
@import '../assets/styles/shopcart';
</style>
